import './index.less';

import { useEffect, useRef, useState } from 'react';
import { Spin } from 'antd';
import React from 'react';

export interface IconProps extends React.SVGProps<SVGSVGElement> {
  name: string;
}

const SvgIcon = (props: IconProps) => {
  const { name, ...otherProps } = props;
  const Icon = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const dynamicImport = async (name: string) => {
      setLoading(true);
      Icon.current = (await import(`../../assets/svg/${name}.svg?react`)).default;
      setLoading(false);
    };
    dynamicImport(name);
  }, [name]);

  return !loading ? (
    Icon.current && <Icon.current {...otherProps} />
  ) : (
    <Spin className="dynamic-icon-spin" size="small" />
  );
};

export { SvgIcon };
